﻿
@{
    ViewBag.Title = "AddMyKHBFJX";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="~/Template/ace_admin_v1.4.0/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<script src="~/Template/ace_admin_v1.4.0/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="~/Template/ace_admin_v1.4.0/components/moment/moment.js"></script>
<div class="row" id="app">
    <div class="col-lg-12">
        <div class="row" id="fujiaxiangdiv">
            <div class="col-xs-12">
                <!--时间-->
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" data-rel="tooltip" title="哪个月的工作计划"> 所属时间 </label>
                                <div class="col-sm-5">
                                    <div class="input-group">
                                        <input class="form-control date-picker" readonly="readonly" type="text" data-date-format="yyyy-mm" id="sssj" />
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar bigger-110"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <p>
                                        <button class="btn btn-white btn-info btn-bold" v-on:click="p_SouSuo">
                                            <i class="ace-icon glyphicon glyphicon-plus bigger-120 blue"></i>
                                            搜索
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--考核表列表-->
                <div class="row" id="list">
                    <div class="col-xs-12">
                        <div class="table-header">
                            考核表列表
                        </div>
                        <div>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th class="center">
                                            账号/编号
                                        </th>
                                        <th>姓名</th>
                                        <th>考核表</th>
                                        <th>所在科室</th>
                                        <th>职务</th>
                                        <th></th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr v-for="tr in gzjhlist">
                                        <td class="center">
                                            {{tr.username}}
                                        </td>
                                        <td>{{tr.xingming}}</td>

                                        <td>{{tr.mkhbmc}}</td>
                                        <td>{{tr.ksmc}}</td>
                                        <td>{{tr.zwmc}}</td>
                                        <td>
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm " aria-expanded="true">
                                                    操作
                                                    <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                                </button>

                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:void(0)" v-on:click="p_EditData(tr.xingming,tr.mkhbid)">查看加分项</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--附件项列表-->
                <div class="row" id="fujiaxianglist" style="display: none">
                    <div class="col-xs-12">

                        <div class="table-header">
                            附件项列表
                        </div>
                        <div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h4>{{username}}</h4> 
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <p>
                                                <button class="btn btn-white btn-info btn-bold" v-on:click="P_AddNewPage">
                                                    <i class="ace-icon glyphicon glyphicon-plus bigger-120 blue"></i>
                                                    添加加分项
                                                </button>
                                                <button class="btn btn-white btn-info btn-bold" v-on:click="p_fanhui">
                                                    返回
                                                </button>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th class="center">
                                            加分项
                                        </th>
                                        <th>分值</th>
                                        <th></th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr v-for="tr in khbfjxlist">
                                        <td class="center">
                                            {{tr.xmmc}}
                                        </td>
                                        <td>{{tr.xmfz}}</td>
                                        <td>
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm " aria-expanded="true">
                                                    操作
                                                    <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:void(0)" v-on:click="p_DelData(tr.fjxid)">删除</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--弹出框-->
        <div class="row">
            <div class="col-xs-12">
                <div id="dialog-message" class="hide">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 加分项 </label>
                                    <div class="col-sm-9">
                                        <select class="form-control" v-model="fujiaxianginfo">
                                            <option value="0">未选择</option>
                                            <option v-for="option in fujiaxianglist" v-bind:value="option"> {{ option.fjxmc }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 附加项分值 </label>
                                    <div class="col-sm-9"><input type="text" placeholder="附加项分值" class="col-xs-10 col-sm-5" v-model="fujiaxianginfo.fjxfz" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- #dialog-message -->
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/JsModel/Model_FuJiaXiang.js"></script>
<script src="~/Scripts/JsModel/Model_KaoHeBiao.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            fujiaxianglist: [],
            fujiaxianginfo: new FuJiaXiang(),
            gzjhlist: [],
            khbfjxlist: [],
            username: "",
            mkhbid:0
        },
        mounted() {
            this.init();
        },
        methods: {
            init: function () {
                $('.date-picker').datepicker({
                    language: "zh-CN",
                    autoclose: true,
                    format: "yyyy-mm",
                    minViewMode: 1
                }).next().on(ace.click_event, function () {
                    $(this).prev().focus();
                });
                $('[data-rel=tooltip]').tooltip();
                var _self = this;
                _self.p_GetFuJiaXiangs();
            },
            p_SouSuo: function () { this.p_GetGZJHs(); },
            p_GetGZJHs: function() {
                var _self = this;
                //获取工作计划
                axios.get("@Url.Action("GetMyKaoHeBiaoBydatetime", "FuJiaXiang")",
                    { params: { sssj: $("#sssj").val() } }).then((response) => {
                        _self.gzjhlist = [];
                        for (var i = 0; i < response.data.length; i++) {
                            _self.gzjhlist.push(new KaoHeBiao(response.data[i]));
                        }
                    },
                    (response) => {
                        debugger;

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            p_EditData: function (username,mkhbid) {
                var _self = this;
                _self.username = username;
                _self.mkhbid = mkhbid;
                axios.get("@Url.Action("GetMyKaoHeBiaoFuJiaXiang", "FuJiaXiang")",
                    { params: { mkhbid: mkhbid } }).then((response) => {
                        _self.khbfjxlist = [];
                        for (var i = 0; i < response.data.length; i++) {
                            _self.khbfjxlist.push(new MyKaoHeBiaoFujiaxiang(response.data[i]));
                        }
                        $("#list").hide(function() {
                            $("#fujiaxianglist").show();
                        });
                    },
                    (response) => {
                        debugger;

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            p_SaveFuJiaXiang: function() {
                var _self = this;
                axios.get("@Url.Action("MKHBAddFJX", "FuJiaXiang")", { params: { mkhbid: _self.mkhbid, fjxid: _self.fujiaxianginfo.fjxid, fz: _self.fujiaxianginfo.fjxfz } }).then((response) => {
                        bootbox.alert("成功", function() {
                            _self.p_EditData(_self.username, _self.mkhbid);
                            _self.fujiaxianginfo = new FuJiaXiang();
                        });
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            },
            p_DelData: function(fjxid) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            axios.get('@Url.Action("MHKBDelFJX", "FuJiaXiang")', { params: { fjxid: fjxid, mkhbid: _self.mkhbid } }).then(
                                    function (response) {
                                        bootbox.alert("成功", function() {
                                            _self.p_EditData(_self.username, _self.mkhbid);
                                        });
                                    },
                                    function(response) {
                                        alert(response.status);
                                    }
                                )
                                .catch(
                                    function(error) {
                                        alert(error);
                                    }
                                );
                        }
                    });

            },
            P_AddNewPage: function (e) {//弹出新增附加项信息窗口
                var _self = this;
                e.preventDefault();
                var dialog = dialog_comm(true,"dialog-message", "新增附加项信息", null, function () { _self.p_SaveFuJiaXiang(); },true,600);
            },
            p_fanhui: function () {
                var _self = this;
                $("#fujiaxianglist").hide(function() {
                    $("#list").show();
                    _self.p_GetFuJiaXiangs();
                    _self.fujiaxianginfo = new FuJiaXiang();
                });

            },
            p_GetFuJiaXiangs: function() {
                var _self = this;
                //获取工作计划
                axios.get("@Url.Action("GetFuJiaXiangs", "FuJiaXiang")").then((response) => {
                        _self.fujiaxianglist = [];
                        for (var i = 0; i < response.data.length; i++) {
                            _self.fujiaxianglist.push(new FuJiaXiang(response.data[i]));
                        }
                    },
                    (response) => {

                    }
                ).catch(function(response) {
                    console.log(response);
                });
            }
        }
    });
</script>